<script>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';

export default {
  name: 'LeftBottom',
  setup() {
    const lineChart = ref(null);

    onMounted(() => {
      const chartDom = lineChart.value;
      const myChart = echarts.init(chartDom);

      // Set days of the week
      const category = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
      let lineData = [];
      let barData = [];
      for (let i = 0; i < 7; i++) {
        let b = Math.random() * 200;
        let d = Math.random() * 200;
        barData.push(b);
        lineData.push(d + b);
      }

      const option = {
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['土壤温度', '土壤湿度'],
          textStyle: {
            color: '#00ffd9'
          }
        },
        xAxis: {
          data: category,
          axisLine: {
            lineStyle: {
              color: '#00ffd9'
            }
          },
          axisLabel: {
            color: '#00ffd9'
          }
        },
        yAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(0, 255, 217, 0.1)'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#00ffd9'
            }
          },
          axisLabel: {
            color: '#00ffd9'
          }
        },
        series: [
          {
            name: '土壤温度',
            type: 'line',
            smooth: true,
            showAllSymbol: true,
            symbol: 'emptyCircle',
            symbolSize: 8,
            lineStyle: {
              width: 3,
              color: '#00ffd9'
            },
            itemStyle: {
              color: '#00ffd9',
              borderWidth: 2
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(0, 255, 217, 0.3)' },
                { offset: 1, color: 'rgba(0, 255, 217, 0.1)' }
              ])
            },
            data: lineData
          },
          {
            name: '土壤湿度',
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              borderRadius: 5,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#FF6B6B' },
                { offset: 1, color: 'rgba(255, 107, 107, 0.5)' }
              ])
            },
            data: barData
          },
          {
            name: 'line',
            type: 'bar',
            barGap: '-100%',
            barWidth: 10,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(255, 107, 107, 0.3)' },
                { offset: 0.2, color: 'rgba(255, 107, 107, 0.1)' },
                { offset: 1, color: 'rgba(255, 107, 107, 0)' }
              ])
            },
            z: -12,
            data: lineData
          },
          {
            name: 'dotted',
            type: 'pictorialBar',
            symbol: 'rect',
            itemStyle: {
              color: 'rgba(0, 28, 36, 0.3)'
            },
            symbolRepeat: true,
            symbolSize: [12, 4],
            symbolMargin: 1,
            z: -10,
            data: lineData
          }
        ]
      };

      myChart.setOption(option);
    });

    return {
      lineChart
    };
  }
};
</script>
<template>
  <div class="left-bottom">
    <dv-border-box-10 :color="['#00ffd9', 'rgba(0, 255, 217, 0.3)']">
      <div class="content-wrapper">
        <div class="header">
          <div class="title-container">
            <dv-decoration3 class="decoration-left" :color="['#00ffd9', 'rgba(0, 255, 217, 0.3)']" />
            <dv-border-box-2 class="title-box" :color="['#00ffd9', 'rgba(0, 255, 217, 0.3)']">
              <div class="title">土壤温湿度数据分析</div>
            </dv-border-box-2>
            <dv-decoration3 class="decoration-right" :color="['#00ffd9', 'rgba(0, 255, 217, 0.3)']" />
          </div>
        </div>
        <div ref="lineChart" class="chart"></div>
      </div>
    </dv-border-box-10>
  </div>
</template>

<style scoped>
.left-bottom {
  width: 100%;
  height: 100%;
  padding: 12px;
}

.content-wrapper {
  width: 100%;
  height: 100%;
  background: rgba(0, 28, 36, 0.5);
  padding: 16px;
  border-radius: 4px;
}

.header {
  margin-bottom: 8px;
  width: 100%;
}

.title-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.title-box {
  width: fit-content;
  height: 40px;
  padding: 0 30px;
}

.title {
  color: #00ffd9;
  font-size: 16px;
  font-weight: bold;
  white-space: nowrap;
  padding: 0 10px;
  line-height: 40px;
  text-shadow: 0 0 10px rgba(0, 255, 217, 0.3);
}

.chart {
  width: 100%;
  height: 270px; /* 稍微放大高度 */
}

.decoration-left,
.decoration-right {
  width: clamp(80px, 5vw, 200px); /* 最小值80px，理想值15vw，最大值200px */
  height: 20px;
}
</style>